<template>
  <div class="CustomerList">
    <!-- header -->
    <new-header title="历史数据" />

    <div class="cus-center">
      <!-- search -->
      <div class="search">
        <div class="search-item">
          <el-select v-model="ClassID" placeholder="选择班级" size="medium" class="right-item">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.className"
              :value="item.id"
            />
          </el-select>
          <el-select v-model="CourseID" placeholder="选择课程" size="medium" class="right-item">
            <el-option
              v-for="item in culumList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button type="success" @click="Device()">搜索</el-button>
        </div>
      </div>
      <!-- table -->
      <el-table
        :header-cell-style="{background:'#f0f2f5',color:'black'}"
        class="table"
        :data="table_list"
        style="width: 100%"
        fit
        highlight-current-row
        min-height="650"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
        />
        <el-table-column
          fixed
          prop="id"
          label="ID"
          width="55"
        />
        <el-table-column
          align="center"

          prop="className"
          label="班级"
        >
          <template slot-scope="scope">
            <p class="name_word">{{ scope.row.className }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="beginTime"
          label="上课时间"
        />
        <el-table-column
          prop="isStandent"
          label="达标情况"
        />
        <el-table-column
          prop="classTime"
          label="课堂时长"
        />
        <el-table-column
          prop="userCount"
          label="监测人数"
        />
        <el-table-column
          prop="courseName"
          label="课程"
        />
        <el-table-column
          fixed="right"
          label="操作"
        >
          <template slot-scope="scope">

            <div class="table-btn">
              <div
                class="btn-item"
                @click="go_info(scope.row)"
              >详情</div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="pagin"
        background
        :current-page="currentPage"

        :page-size="this.size"

        :total="this.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </div>
  </div>
</template>

<script>
import Index from '@/api/index.js'
import HisRecords from '@/api/hisRecords.js'
import NewHeader from '@/components/NewHeader.vue'
export default {
  name: 'HistoryList',
  components: {
    NewHeader
  },
  data() {
    return {
      classList: [
        {
          className: '全部',
          id: 0
        }
      ],
      culumList: [
        {
          name: '全部',
          id: 0
        }
      ],
      value: '',
      table_list: [
        {
          name: '张一鸣',
          sex: '男',
          number: '123456',
          time: '2020-0608--52',
          work: '协和医院',
          belong: 'xie协和医院组'
        }
      ],
      currentPage: 1,
      size: 10,
      total: 100,
      ClassID: 0,
      CourseID: 0
    }
  },
  mounted() {
    this.GetMonitoringSelect()
    this.Device()
  },
  methods: {
    async GetMonitoringSelect() { // 获取选项
      const result = await Index.GetMonitoringSelect()
      console.log(result)
      if (result.code === window.g.SUCCESS_STATE) {
        this.classList = [...this.classList, ...result.result.classList]
        this.culumList = [...this.culumList, ...result.result.culumList]
      }
    },
    handleSelectionChange(val) {
      console.log(val)
      // alert(`你选择了${val}`)
    },
    async Device() {
      const params = {
        Page: this.currentPage,
        Size: this.size,
        ClassID: this.ClassID,
        CourseID: this.CourseID
      }
      const result = await HisRecords.HisRecordsIndex(params) // 模拟请求
      if (result.code === window.g.SUCCESS_STATE) {
        this.table_list = result.result.result
        this.total = result.result.total
        this.currentPage = result.result.page
      }
    },
    // 页面size改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.size = val
      this.Device()
    },
    // 页面page改变
    handleCurrentChange(val) {
      this.currentPage = val
      this.Device()
    },
    go_info(info) {
      console.log(info)
      this.$router.push({ path: `/history/history-detail/${info.id}` })
    }

  }
}
</script>

<style lang="scss" scoped>
.top-header{
  background-color: white;
  overflow: hidden;
  position: absolute;
  top: -70px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  padding: 0 25px;
  left: 0;
  .left{
    float: left;
    display: flex;
    align-items: center;
    img{
      width: 15px;
    }
    span{
      margin-left: 10px;
      width: 80px;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .right{
    float: right;
    display: flex;
    align-items: center;
    .right-item{
      margin-right: 20px;
      width: 120px;
    }
    .last{
      color: #1890FF;
      font-size: 14px;
    }
  }

}
.CustomerList{
  position: relative;
  padding: 25px;
  .cus-center{
    background-color: white;
    padding: 25px;
    .search{
      overflow: hidden;
      ::v-deep .el-input{
        width: 250px;
        margin: 0 10px;
      }
      .search-item{
        float: left;
        display: flex;
        justify-content: flex-start;
        p{
          font-size: 12px;
        }
      }
    }
    .table{
      margin-top: 30px;
      .table-btn{
        width: fit-content;
        margin: 0 auto;
        display: flex;
        .btn-item{
          cursor: pointer;
          color: #42b983;
          font-size: 14px;
          padding: 0 10px;
        }
      }
    }
  }
}

::v-deep .el-checkbox__input.is-checked .el-checkbox__inner,::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner{
    background-color: #42b983;
    border-color: #42b983;
}
::v-deep .el-checkbox__inner:hover,::v-deep .el-checkbox__inner:focus{
  border-color: #42b983;
  outline-color:#42b983;
}
.name_word{
  color: #46a6ff;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #41cb89;   // 进行修改背景和字体
  color: #fff;
}
.pagin{
  margin-top: 25px;
  text-align: right;
}
</style>
